<div class="layui-row">
    <div class="layui-col-md9">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <input type="hidden" value="<?=$data['fenlei']?>" class="fenlei_value">
                <label class="layui-form-label">分类</label>
                <div class="layui-input-inline fenlei_select" style="width:350px;">
                    <select name="city" class="fenlei" lay-filter="fenlei">
                        <?php if(!empty($fenlei)){
                            foreach($fenlei as $k=>$v){
                                ?>
                                <?php if($v['id']==$data['fenlei']){ ?>
                                    <option value="<?=$v['id']?>" selected><?=$v['name']?></option>
                                <?php }else{ ?>
                                    <option value="<?=$v['id']?>"><?=$v['name']?></option>
                                <?php } ?>
                            <?php }} ?>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">话题</label>
                <div class="layui-input-inline huati_div" style="width:350px;">
                    <select name="city" class="huati">
                        <?php if(!empty($huati)){
                            foreach($huati as $kk=>$vv){
                                ?>
                                <?php if($vv['id']==$data['huati']){ ?>
                                    <option value="<?=$vv['id']?>" selected><?=$vv['sub_title']?></option>
                                <?php }else{ ?>
                                    <option value="<?=$vv['id']?>"><?=$vv['sub_title']?></option>
                                <?php } ?>
                            <?php }} ?>
                    </select>

                </div>
                <div class="layui-form-mid layui-word-aux">请先选择分类</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">添加视频</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn video" id="video"><i class="layui-icon">&#xe67c;</i>添加视频</button>
                    <input type="text" name="" class="wenzi1" style="width:300px;height:35px;margin-left:20px;display:none;">
                    <span class="up1" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                    <input type="hidden" name="video_url" value="<?=$data['video_url']?>" class="video_url">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">关联图片</label>
                <div class="layui-input-inline" style="width:400px;">
                    <button type="button" class="layui-btn guanlian" id="guanlian"><i class="layui-icon">&#xe67c;</i>添加关联图片</button>
                    <input type="text" name="" class="wenzi2" style="width:300px;height:35px;margin-left:20px;display:none;">
                    <span class="up2" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                    <input type="hidden" name="guanlian_url" value="<?=$data['video_guanlian_pic']?>" class="guanlian_url">
                    <br><br>
                    <div style="width:100px;height:100px;border:1px solid lightgreen;float: left;">
                        <img src="<?=$data['video_guanlian_pic']?>" class="guanlian_http" style="width:100px;height:100px;">
                    </div>
                    <div class="layui-form-mid layui-word-aux" style="margin-left:10px;">建议尺寸240x360，必填</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">大屏图片</label>
                <div class="layui-input-inline" style="width:400px;">
                    <button type="button" class="layui-btn daping" id="daping"><i class="layui-icon">&#xe67c;</i>添加大屏图片</button>
                    <input type="text" name="" class="wenzi3" style="width:300px;height:35px;margin-left:20px;display:none;">
                    <span class="up3" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                    <input type="hidden" name="daping_url" value="<?=$data['video_daping_pic']?>" class="daping_url">
                    <br><br>
                    <div style="width:100px;height:100px;border:1px solid lightgreen;float: left;">
                        <img src="<?=$data['video_daping_pic']?>" class="daping_http" style="width:100px;height:100px;">
                    </div>
                    <div class="layui-form-mid layui-word-aux" style="margin-left:10px;">建议尺寸528*296，必填</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分享图片</label>
                <div class="layui-input-inline" style="width:400px;">
                    <button type="button" class="layui-btn share" id="share"><i class="layui-icon">&#xe67c;</i>添加分享图片</button>
                    <input type="text" name="" class="wenzi4" style="width:300px;height:35px;margin-left:20px;display:none;">
                    <span class="up4" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                    <input type="hidden" name="share_url" value="<?=$data['video_share_pic']?>" class="share_url">
                    <br><br>
                    <div style="width:100px;height:100px;border:1px solid lightgreen;float: left;">
                        <img src="<?=$data['video_share_pic']?>" class="share_http" style="width:100px;height:100px;">
                    </div>
                    <div class="layui-form-mid layui-word-aux" style="margin-left:10px;">建议尺寸210x168，必填</div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">视频标题</label>
                <div class="layui-input-block" style="width:400px;">
                    <textarea name="title" placeholder="请输入标题" class="layui-textarea video_title"><?=$data['video_title']?></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="hidden" name="" value="<?=$data['id']?>" class="id">
                    <button type="button" class="layui-btn save">保存</button>
                    <button type="button" class="layui-btn layui-btn-primary back">取消</button>
                </div>
            </div>

        </form>
    </div>
    <div class="layui-col-md3">
        <h4>视频预览</h4>
        <div style="width:99%;height:300px;border:1px solid lightgreen;">
            <video src="<?=$data['video_url']?>" class="video_http" style="width:90%;height:300px;" controls></video>
        </div>
    </div>
</div>


<script>
    //保存
    $(".save").click(function(){
        var id=$(".id").val();
        var fenlei=$(".fenlei").val();
        var huati=$(".huati").val();
        var video_url=$(".video_url").val();
        var guanlian_url=$(".guanlian_url").val();
        var daping_url=$(".daping_url").val();
        var share_url=$(".share_url").val();
        var video_title=$(".video_title").val();
//        var a=[fenlei,huati,video_url,hengping_url,shuping_url,share_url,video_title]
        $.ajax({
            type:"post",
            data:{fenlei:fenlei,huati:huati,video_url:video_url,guanlian_url:guanlian_url,daping_url:daping_url,share_url:share_url,video_title:video_title,id:id},
            dataType: "json",
            url: "<?=base_url("no_edit/video/save_edit_add_video")?>",
            success: function (res) {
                if(res.code==0){
                    layer.msg(res.msg, {time:1000},function(){
                        window.location.href=res.data
                    });
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            }
        })
    })

    $(function(){
        //上传
        layui.use('upload', function(){
            var upload = layui.upload;
            //上传视频
            upload.render({
                elem: '#video' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "video"}
                ,size:"51200"
                ,accept: 'video'
                ,acceptMime: 'video/mp4,video/mov,video/avi'
                ,before:function(){
                    $(".up1").text("上传中。。。请等待");
                    $(".up1").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up1").text("上传成功");
                            $('.video_http').attr("src",res.data.file_url)
                            $('.video_url').val(res.data.file_url)
                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });

            //上传关联图片
            upload.render({
                elem: '#guanlian' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,before:function(){
                    $(".up2").text("上传中。。。请等待");
                    $(".up2").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up2").text("上传成功");
//                            $(".wenzi2").show();
//                            $(".wenzi2").val(res.data.file_url);
                            $('.guanlian_http').attr("src",res.data.file_url)
                            $('.guanlian_url').val(res.data.file_url)
                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });

            //上传大屏图片
            upload.render({
                elem: '#daping' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,before:function(){
                    $(".up3").text("上传中。。。请等待");
                    $(".up3").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up3").text("上传成功");
                            $('.daping_http').attr("src",res.data.file_url)
                            $('.daping_url').val(res.data.file_url)
                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });

            //上传分享图片
            upload.render({
                elem: '#share' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,before:function(){
                    $(".up4").text("上传中。。。请等待");
                    $(".up4").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up4").text("上传成功");
                            $('.share_http').attr("src",res.data.file_url)
                            $('.share_url').val(res.data.file_url)
                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });


        });

        //监听下拉框
        layui.use('form', function(){
            var form = layui.form;
            //监听下拉框选择
            form.on('select(fenlei)', function(data){
                //获得监听的值
                var type_id=data.value;
                //给下拉框赋值
                $('.fenlei_value').val(type_id);
                //获得下拉框的值
                var type_ids=$('.fenlei_value').val();
                //有参数传递，则是POST方式,这是下拉框局部刷新
                $(".huati").load("<?=base_url("no_edit/video/get_huati")?>",{huati_id:type_ids},function(res){
                    //把数据json转化下
                    var arr = JSON.parse(res);
                    if(arr.code==0){
                        var arrs = arr.data;
                        $.each(arrs, function (i, n) {
                            $('.huati').append("<option value='" + n.id + "'>" + n.sub_title + "</option>");
                        });
                        layui.form.render('select');
                    }else{
                        layer.msg(arr.msg, {time: 2000},function(){
                            $('.huati').append("<option value=''></option>");
                        });
                        layui.form.render('select');
                    }
                });
            })
        })

    })
    //获取分类
    $.ajax({
        type: "get",
        data: {},
        dataType: "json",
        url: "<?=base_url("no_edit/video/get_fenlei")?>",
        success: function (res) {
            if(res.code==0){
//                var arr = JSON.parse(res.data);
                var arr = res.data;
                $.each(arr, function (i, n) {
                    $('.fenlei').append("<option value='" + n.id + "'>" + n.name + "</option>");
                });
                layui.form.render('select');
            }else{
                layer.msg(res.msg, {time: 2000});
            }
        }
    })
    //没有先选择分类加个提示框
    $(".layui-input-inline.huati_div").click(function(){
        var fenlei_value=$(".fenlei_value").val();
        if(fenlei_value.length==0){
            layer.msg("请先选择分类",{time:2000})
        }
    })
    //返回
    $(".back").click(function(){
        window.history.back(-1);
    })
</script>